<template>
  <div class="search-index container">
    <Header></Header>
    <section>
      <div class="search-history" v-if="searchArr.length">
        <div class="label">
          <div class="history">
            <i class="iconfont icon-history"></i>
            <h2>历史搜索</h2>
          </div>
          <div class="delete" @click="deleteHistory">
            <h2>清空历史记录</h2>
            <i class="iconfont icon-delete"></i>
          </div>
        </div>
        <Ul>
          <li
            v-for="(item, index) in searchArr"
            :key="index"
            @click="goSearchList(item)"
          >
            {{ item }}
          </li>
        </Ul>
      </div>
      <div v-else style="font-size: 0.4rem">暂时无查找记录...</div>

      <div class="search-hot">
        <div class="label">
          <i class="iconfont icon-hotfill"></i>
          <h2>热门搜索</h2>
        </div>
        <Ul>
          <li>茶叶</li>
        </Ul>
      </div>
      <div class="recommend">
        <h1>商品推荐</h1>
        <!-- <Like></Like> -->
      </div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
// import Like from "@/components/home/Like.vue"
import Header from "@/components/search/Header.vue";
import Tabbar from "@/components/common/Tabbar.vue";
import { MessageBox } from "mint-ui";
export default {
  name: "SearchIndex",
  components: {
    Tabbar,
    Header,
    // Like
  },
  data() {
    return {
      searchArr: [],
    };
  },
  created() {
    this.searchArr = JSON.parse(localStorage.getItem("searchList")) || [];
    console.log(this.searchArr);
  },
  methods: {
    //点击历史搜索，进入搜索结果页
    goSearchList(item) {
      this.$router.push({
        name: "List",
        query: {
          key: item,
        },
      });
    },
    deleteHistory() {
      MessageBox({
        title: "删除搜索历史",
        message: "您确定删除吗?",
        showCancelButton: true,
      }).then((res) => {
        if (res == "confirm") {
          //删除本地存储
          localStorage.removeItem("searchList");
          //清空数据
          this.searchArr = [];
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.search-index {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  section {
    flex: 1;
    overflow: hidden;
    background-color: #f5f5f5;
    padding: 0.2rem;

    .search-history {
      .label {
        display: flex;
        // justify-content: space-between;
        align-items: center;

        .history {
          display: flex;
          justify-content: left;
          align-items: center;
          width: 50%;
        }
        .delete {
          display: flex;
          justify-content: right;
          align-items: center;
          width: 50%;
        }

        h2 {
          font-size: 0.45rem;
          font-weight: 400;
          margin-left: 0.1rem;
        }
        i {
          color: #b0352f;
          font-size: 0.475rem;
        }
      }
      Ul {
        display: flex;
        flex-wrap: wrap;
        padding: 0.2rem 0.3125rem;
        color: #999;

        li {
          margin: 0.15rem;
          padding: 0.125rem;
          font-size: 0.4rem;
          border: 1px solid #ccc;
          border-radius: 0.125rem;
        }
      }
    }

    //热门搜索
    .search-hot {
      margin-top: 0.5rem;
      .label {
        display: flex;
        justify-content: left;
        align-items: center;

        h2 {
          font-size: 0.45rem;
          font-weight: 400;
          margin-left: 0.1rem;
        }
        i {
          color: #b0352f;
          font-size: 0.475rem;
        }
      }
      Ul {
        display: flex;
        flex-wrap: wrap;
        padding: 0.2rem 0.3125rem;
        color: #999;

        li {
          margin: 0.15rem;
          padding: 0.125rem;
          font-size: 0.4rem;
          border: 1px solid #ccc;
          border-radius: 0.125rem;
        }
      }
    }
  }
}
</style>
